<template>
  <div class="container">
    <div class="canvas" style="opacity: 0.2">
      <iframe
        frameborder="0"
        src="static/background.html"
        style="width: 100%; height: 100%"
      ></iframe>
    </div>
    <div class="loading" v-if="loading">
      <div class="loadbox">
        <img src="../assets/picture/loading.gif" /> 页面加载中...
      </div>
    </div>
    <div class="head">
      <h1>NBA大数据分析可视化</h1>
      <div class="time">
        <span>{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span>
      </div>
    </div>
    <div class="mainbox">
      <ul class="clearfix">
        <li style="display: flex">
          <div class="boxall" style="height: 1.5rem; flex: 1 1">
            <div style="height: 100%; width: 100%">
              <div class="main-title">
                <div class="title">历史分析</div>
                <!-- <div class="title_text">
                  <p>由历史数据平均查看，{{ winTeamMax.name }}获得表现最好。</p>
                </div> -->
              </div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="winTeamMax.name1"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">胜场最多球队</div>
                <div class="text">{{ winTeamMax.name }}</div>
                <div class="text">{{ winTeamMax.count }}</div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="scoreTeamMax.name1"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">场均得分最多球队</div>
                <div class="text">{{ scoreTeamMax.name }}</div>
                <div class="text">{{ scoreTeamMax.count }}</div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="mainWinTeamMax.name1"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">主场胜场最多球队</div>
                <div class="text">{{ mainWinTeamMax.name }}</div>
                <div class="text">{{ mainWinTeamMax.count }}</div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="loseTeamMax.name1"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">失分最少球队</div>
                <div class="text">{{ loseTeamMax.name }}</div>
                <div class="text">{{ loseTeamMax.count }}</div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="secondWinTeamMax.name1"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">客场胜场最多球队</div>
                <div class="text">{{ secondWinTeamMax.name }}</div>
                <div class="text">{{ secondWinTeamMax.count }}</div>
              </div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 6rem; flex: 2">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">球队平均胜场，场均得分，胜率</div>
              <div class="allnav" id="teamAll"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
          <div class="boxall" style="height: 6rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <img src="../assets/picture/nba.png" height="100%" width="100%" />
            </div>
          </div>
          <div class="boxall" style="height: 6rem; flex: 2">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">历史获胜场数最高的球队</div>
              <div class="allnav" id="winHistory"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 1.5rem; flex: 1 1">
            <div style="height: 100%; width: 100%">
              <div class="main-title">
                <div class="title">赛季分析</div>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  style="margin-left: 0.1rem"
                  size="small"
                  circle
                  @click="chooseSeason"
                ></el-button>
                <!-- <div class="title_text"><p>由历史数据平均查看，{{ curSeason.name}}中{{curSeasonBestPlayer.mvp.name}}获得表现最好，{{curSeasonBestPlayer.score.name}}获得赛季得分王。</p></div> -->
              </div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 7rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="curSeasonBestPlayer.mvp.image"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">{{ curSeason.name }}赛季MVP</div>
                <div class="text">{{ curSeasonBestPlayer.mvp.name }}</div>
                <div class="text">{{ curSeasonBestPlayer.mvp.count }}</div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 7rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="curSeasonBestPlayer.score.image"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">{{ curSeason.name }}赛季得分王</div>
                <div class="text">{{ curSeasonBestPlayer.score.name }}</div>
                <div class="text">{{ curSeasonBestPlayer.score.count }}</div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 7rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="curSeasonBestPlayer.backboard.image"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">{{ curSeason.name }}赛季篮板王</div>
                <div class="text">{{ curSeasonBestPlayer.backboard.name }}</div>
                <div class="text">
                  {{ curSeasonBestPlayer.backboard.count }}
                </div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 7rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="curSeasonBestPlayer.three_point.image"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">{{ curSeason.name }}赛季三分王</div>
                <div class="text">
                  {{ curSeasonBestPlayer.three_point.name }}
                </div>
                <div class="text">
                  {{ curSeasonBestPlayer.three_point.count }}
                </div>
              </div>
            </div>
          </div>
          <div class="boxall" style="height: 7rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <!-- <div class="alltitle">16-17赛季最有价值球员排行</div> -->
              <div class="star_image">
                <img
                  style="width: 100%; height: 100%"
                  :src="curSeasonBestPlayer.assist.image"
                  alt=""
                  srcset=""
                />
              </div>
              <!-- <div class="allnav" id="bestWorthPlayer"></div> -->
              <div class="star_image_foot">
                <div class="title">{{ curSeason.name }}赛季助攻王</div>
                <div class="text">{{ curSeasonBestPlayer.assist.name }}</div>
                <div class="text">{{ curSeasonBestPlayer.assist.count }}</div>
              </div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 7rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">
                {{ curSeason.name }}赛季最有价值球员排行
              </div>
              <div class="allnav" id="bestWorthPlayer"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
          <div class="boxall" style="height: 7rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">
                {{ curSeason.name }}赛季最激烈队伍TOP10
              </div>
              <div class="allnav" id="teamRaceTop"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 3rem; flex: 1">
            <div class="alltitle">球队胜场top6</div>
            <div class="allnav" id="teamWinTop6"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3rem; flex: 1">
            <div class="alltitle">球队得分top6</div>
            <div class="allnav" id="teamSocreTop6"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3rem; flex: 1">
            <div class="alltitle">球队盖帽top6</div>
            <div class="allnav" id="teamCapTop6"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 3rem; flex: 1">
            <div class="alltitle">球队失分最少top6</div>
            <div class="allnav" id="teamLosTop6"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 1.5rem; flex: 1 1">
            <div style="height: 100%; width: 100%">
              <div class="main-title">
                <div class="title">球队分析</div>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  style="margin-left: 0.1rem"
                  size="small"
                  circle
                  @click="chooseTeam"
                ></el-button>
                <!-- <div class="title_text"><p>由历史数据平均查看，{{ curTeam}}表现如下。</p></div> -->
              </div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 5rem; flex: 1">
            <div class="alltitle">{{ curTeam }}球队近年得分变化图</div>
            <div class="allnav" id="teamHistory"></div>
            <div class="boxfoot"></div>
          </div>

          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">{{ curTeam }}球队近年胜场变化图</div>
              <div class="allnav" id="teamWinRate"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 1">
            <div class="alltitle">{{ curTeam }}球队三分命中变化图</div>
            <div class="allnav" id="teamThreePoint"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 5rem; flex: 1">
            <div class="alltitle">{{ curTeam }}队成员前六名薪资排行</div>
            <div class="allnav" id="teamSalaryTop6"></div>
            <div class="boxfoot"></div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 1">
            <div class="alltitle">{{ curTeam }}队成员前六名薪资与得分关系</div>
            <div class="allnav" id="teamSalaryAndScore"></div>
            <div class="boxfoot"></div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 1.5rem; flex: 1 1">
            <div style="height: 100%; width: 100%">
              <div class="main-title">
                <div class="title">球员分析</div>
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  style="margin-left: 0.1rem"
                  size="small"
                  circle
                  @click="choosePlayer"
                ></el-button>
                <!-- <div class="title_text"><p>由历史数据平均查看，{{ curPlayer.name}}表现如下。</p></div> -->
              </div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <div class="star_image" style="height: 80%">
                <img style="width: 100%; height: 100%" :src="curPlayer.image" />
              </div>
            </div>
            <div class="star_image_foot" style="height: 20%">
              <div class="text">{{ curPlayer.name }}</div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 2">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">{{ curPlayer.name }}各位置命中率</div>
              <div class="allnav" id="playerShotRate"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 2">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">{{ curPlayer.name }}属性图</div>
              <div class="allnav" id="playerAttribute"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
        </li>
        <li style="display: flex">
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">各赛季{{ curPlayer.name }}贡献值变化</div>
              <div class="allnav" id="contributionValue"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
          <div class="boxall" style="height: 5rem; flex: 1">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">各赛季{{ curPlayer.name }}命中率变化</div>
              <div class="allnav" id="zoneHitRatio"></div>
              <div class="boxfoot"></div>
            </div>
          </div>
        </li>
        <!-- <li>
          <div class="boxall" style="height: 5rem; width: 100%">
            <div style="height: 100%; width: 100%">
              <div class="alltitle">16-17赛季球队获胜内因排名表</div>
              <div class="allnav" id="rankTable">
                <el-table
                  :data="rankTableConfig.data"
                  :header-cell-style="{
                    backgroundColor: '#7D84FF',
                    fontSize: '0.2rem',
                    height: '0.4rem',
                  }"
                  row-class-name="my-row"
                  height="4rem"
                >
                  <el-table-column prop="name" label="球队" sortable />
                  <el-table-column prop="win" label="胜场" sortable />
                  <el-table-column prop="shot" label="出手" sortable />
                  <el-table-column prop="score" label="得分" sortable />
                  <el-table-column prop="assist" label="助攻" sortable />
                  <el-table-column
                    prop="three_point"
                    label="三分命中"
                    sortable
                  />
                  <el-table-column prop="cap" label="盖帽" sortable />
                  <el-table-column prop="backboard" label="篮板" sortable />
                  <el-table-column prop="foul" label="犯规" sortable />
                  <el-table-column prop="steal" label="抢断" sortable />
                </el-table>
              </div>
              <div class="boxfoot"></div>
            </div>
          </div>
        </li> -->
      </ul>
    </div>
    <div class="back"></div>
    <el-dialog title="选择赛季" :visible.sync="isShowSeasonDialog">
      <el-select
        :value="curSeason.id"
        @change="changeSeason"
        placeholder="请选择赛季"
      >
        <el-option
          v-for="item in seasonList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-dialog>
    <el-dialog title="选择球队" :visible.sync="isShowTeamDialog">
      <el-select :value="curTeam" @change="changeTeam" placeholder="请选择球队">
        <el-option v-for="item in teamList" :key="item.index" :value="item">
        </el-option>
      </el-select>
    </el-dialog>
    <el-dialog title="选择球员" :visible.sync="isShowPlayerDialog">
      <el-select
        :value="curPlayer.id"
        @change="changePlayer"
        placeholder="请选择球员"
      >
        <el-option
          v-for="item in playerList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
    </el-dialog>
  </div>
</template>

<script>
// 队伍图片
import ATL from "../assets/images/team/ATL.png";
import SAS from "../assets/images/team/SAS.png";
import PHO from "../assets/images/team/PHO.png";
import BKN from "../assets/images/team/BKN.png";
import BOS from "../assets/images/team/BOS.png";
import CHA from "../assets/images/team/CHA.png";
import CHI from "../assets/images/team/CHI.png";
import CLE from "../assets/images/team/CLE.png";
import DAL from "../assets/images/team/DAL.png";
import DEN from "../assets/images/team/DEN.png";
import DET from "../assets/images/team/DET.png";
import GSW from "../assets/images/team/GSW.png";
import HOU from "../assets/images/team/HOU.png";
import IND from "../assets/images/team/IND.png";
import LAC from "../assets/images/team/LAC.png";
import LAL from "../assets/images/team/LAL.png";
import MEM from "../assets/images/team/MEM.png";
import MIA from "../assets/images/team/MIA.png";
import MIL from "../assets/images/team/MIL.png";
import MIN from "../assets/images/team/MIN.png";
import NOH from "../assets/images/team/NOH.png";
import NYK from "../assets/images/team/NYK.png";
import OKC from "../assets/images/team/OKC.png";
import ORL from "../assets/images/team/ORL.png";
import PHI from "../assets/images/team/PHI.png";
import POR from "../assets/images/team/POR.png";
import SAC from "../assets/images/team/SAC.png";
import TOR from "../assets/images/team/TOR.png";
import UTA from "../assets/images/team/UTA.png";
import WAS from "../assets/images/team/WAS.png";

// 运动员图片
import { formatTime } from "../utils/index.js";
import AnthonyDavis from "../assets/images/players/Anthony Davis.jpg";
import AnthonyTowns from "../assets/images/players/Anthony Towns.jpg";
import DamianLillard from "../assets/images/players/Damian Lillard.jpg";
import DeMarDeRozan from "../assets/images/players/DeMar DeRozan.jpg";
import DeMarcusCousins from "../assets/images/players/DeMarcus Cousins.jpg";
import JamesHarden from "../assets/images/players/James Harden.jpg";
import JoeJohnson from "../assets/images/players/Joe Johnson.jpg";
import KarlMalone from "../assets/images/players/Karl Malone.jpg";
import KevinDurant from "../assets/images/players/Kevin Durant.jpg";
import KlayThompson from "../assets/images/players/Klay Thompson.jpg";
import KobeBryant from "../assets/images/players/Kobe Bryant.jpg";
import KyrieIrving from "../assets/images/players/Kyrie Irving.jpg";
import LeBronJames from "../assets/images/players/LeBron James.jpg";
import MichaelJordan from "../assets/images/players/Michael Jordan.jpg";
import PaulGeorge from "../assets/images/players/Paul George.jpg";
import RayAllen from "../assets/images/players/Ray Allen.jpg";
import RussellWestbrook from "../assets/images/players/Russell Westbrook.jpg";
import ShaquilleO from "../assets/images/players/Shaquille O.jpg";
import StephenCurry from "../assets/images/players/Stephen Curry.jpg";
import TimDuncan from "../assets/images/players/Tim Duncan.jpg";
import RajonRondo from "../assets/images/players/Rajon Rondo.jpg";
import SteveNash from "../assets/images/players/Steve Nash.jpg";
import RyanAnderson from "../assets/images/players/Ryan Anderson.jpg";
import OmerAsik from "../assets/images/players/Omer Asik.jpg";
import KevinLove from "../assets/images/players/Kevin Love.jpg";
import GreivisVasquez from "../assets/images/players/Greivis Vasquez.jpg";
import DwightHoward from "../assets/images/players/Dwight Howard.jpg";
import DorellWright from "../assets/images/players/Dorell Wright.jpg";
import DeAndreJordan from "../assets/images/players/DeAndre Jordan.jpg";
import ChrisPaul from "../assets/images/players/Chris Paul.jpg";
import AndreDrummond from "../assets/images/players/Andre Drummond.jpg";
import AaronBrooks from "../assets/images/players/Aaron Brooks.jpg";
import JohnWall from "../assets/images/players/John Wall.jpg";
const BASE_URL = "/api";
//const BASE_PLAYER_IMAGE_URL = "../assets/images/players/";
const imgMap = {
  // 队伍
  ATL: ATL,
  SAS: SAS,
  PHO: PHO,
  BKN: BKN,
  BOS: BOS,
  CHA: CHA,
  CHI: CHI,
  CLE: CLE,
  DAL: DAL,
  DEN: DEN,
  DET: DET,
  GSW: GSW,
  HOU: HOU,
  IND: IND,
  LAC: LAC,
  LAL: LAL,
  MEM: MEM,
  MIA: MIA,
  MIL: MIL,
  MIN: MIN,
  NOH: NOH,
  NYK: NYK,
  OKC: OKC,
  ORL: ORL,
  PHI: PHI,
  POR: POR,
  SAC: SAC,
  TOR: TOR,
  UTA: UTA,
  WAS: WAS,

  // 球员
  "Anthony Davis": AnthonyDavis,
  "Anthony Towns": AnthonyTowns,
  "Damian Lillard": DamianLillard,
  "DeMar DeRozan": DeMarDeRozan,
  "DeMarcus Cousins": DeMarcusCousins,
  "James Harden": JamesHarden,
  "Joe Johnson": JoeJohnson,
  "Karl Malone": KarlMalone,
  "Kevin Durant": KevinDurant,
  "Klay Thompson": KlayThompson,
  "Kobe Bryant": KobeBryant,
  "Kyrie Irving": KyrieIrving,
  "LeBron James": LeBronJames,
  "Michael Jordan": MichaelJordan,
  "Paul George": PaulGeorge,
  "Ray Allen": RayAllen,
  "Russell Westbrook": RussellWestbrook,
  "Shaquille O": ShaquilleO,
  "Stephen Curry": StephenCurry,
  "Tim Duncan": TimDuncan,
  "Andre Drummond": AndreDrummond,
  "Rajon Rondo": RajonRondo,
  "Steve Nash": SteveNash,
  "Ryan Anderson": RyanAnderson,
  "Omer Asik": OmerAsik,
  "Kevin Love": KevinLove,
  "Greivis Vasquez": GreivisVasquez,
  "Dwight Howard": DwightHoward,
  "Dorell Wright": DorellWright,
  "DeAndre Jordan": DeAndreJordan,
  "Chris Paul": ChrisPaul,
  "Aaron Brooks": AaronBrooks,
  "John Wall": JohnWall,
};

export default {
  mounted() {
    this.updateTimeFn();
    this.request(); // 请求网络数据
    this.renderTeamHistory();
    this.renderTeamThreePointHistory();
    this.renderPlayerShotRate();
    this.renderPlayerAttribute();
    this.renderTeamAll();
    this.renderTeamWinTop6();
    this.renderTeamScoreTop6();
    this.renderTeamCapTop6();
    this.renderTeamLosTop6();
    this.renderWinRate();
    // this.renderwinRate2();
    this.bestWorthPlayer();
    this.contriValue();
    this.zoneHitRatioRange();
    this.renderTable();
    this.renderWinHistory();
    this.renderTeamRaceTop();
    this.renderTeamSalaryTop6();
    this.renderTeamSalaryAndScore();
    this.cancelLoading();
  },
  data() {
    return {
      isShowSeasonDialog: false,
      isShowTeamDialog: false,
      isShowPlayerDialog: false,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      winTeamMax: {
        name: "尤文",
        count: "100",
      }, // 胜场最多球队
      scoreTeamMax: {
        name: "尤文",
        count: "100",
      }, // 场均得分最多球队
      mainWinTeamMax: {
        name: "尤文",
        count: "100",
      }, // 主场胜场最多球队
      loseTeamMax: {
        name: "尤文",
        count: "100",
      }, // 失分最少球队
      secondWinTeamMax: {
        name: "尤文",
        count: "100",
      }, // 客场胜场最多球队
      teamList: [
        "ATL",
        "BKN",
        "BOS",
        "CHA",
        "CHI",
        "CLE",
        "DAL",
        "DEN",
        "DET",
        "GSW",
        "HOU",
        "IND",
        "LAC",
        "LAL",
        "MEM",
        "MIA",
        "MIL",
      ], // 所有 球队 列表
      playerList: [
        {id: 1, name: "Russell Westbrook"},
        {id: 2, name: "Stephen Curry"},
        { id: 6, name: "James Harden" },
        { id: 7, name: "Kobe Bryant" },
        { id: 8, name: "LeBron James" },
        { id: 9, name: "Kevin Durant" },
        {id: 10, name: "Kyrie Irving"},
      ], // 所有 球员 列表
      seasonList: [
        { id: 0, name: "09-10" },
        { id: 1, name: "10-11" },
        { id: 2, name: "11-12" },
        { id: 3, name: "12-13" },
        { id: 4, name: "13-14" },
        { id: 5, name: "14-15" },
        { id: 6, name: "15-16" },
        { id: 7, name: "16-17" },
      ], // 所有 赛季 列表
      curSeason: {
        // 当前选择的赛季
        id: 1,
        name: "16-17",
      },
      // curTeam: {
      //   // 当前选择的球队
      //   id: 1,
      //   name: "LAL",
      // },
      curTeam: "LAL",
      curPlayer: {
        // 当前选择的球员
        id: 1,
        name: "Kevin Durant",
        image: imgMap["Kevin Durant"],
      },
      curSeasonBestPlayer: {
        // 当前赛季最佳球员
        mvp: {
          image: "../assets/images/players/Kevin Durant.jpg",
        },
        score: {},
        backboard: {},
        three_point: {},
        assist: {},
      },
      renderTeamAll_option: {},
      rankTableConfig: {
        data: [
          {
            id: 0,
            name: "GSW",
            year: 2007,
            score: 45,
            win: 20,
            shot: 5,
            assist: 1,
            three_point: 1,
            cap: 5,
            backboard: 5,
            foul: 11,
            steal: 9,
          },
          {
            id: 1,
            name: "SAS1",
            year: 2007,
            score: 45,
            win: 20,
            shot: 5,
            assist: 1,
            three_point: 1,
            cap: 5,
            backboard: 5,
            foul: 11,
            steal: 9,
          },
          {
            id: 2,
            name: "SAS2",
            year: 2007,
            score: 45,
            win: 20,
            shot: 5,
            assist: 1,
            three_point: 1,
            cap: 5,
            backboard: 5,
            foul: 11,
            steal: 9,
          },
          {
            id: 3,
            name: "SAS3",
            year: 2007,
            score: 45,
            win: 20,
            shot: 5,
            assist: 1,
            three_point: 1,
            cap: 5,
            backboard: 5,
            foul: 11,
            steal: 9,
          },
          {
            id: 4,
            name: "SAS4",
            year: 2007,
            score: 45,
            win: 20,
            shot: 5,
            assist: 1,
            three_point: 1,
            cap: 5,
            backboard: 5,
            foul: 11,
            steal: 9,
          },
          {
            id: 5,
            name: "SAS5",
            year: 2007,
            score: 45,
            win: 20,
            shot: 5,
            assist: 1,
            three_point: 1,
            cap: 5,
            backboard: 5,
            foul: 11,
            steal: 9,
          },
        ],
      },
    };
  },
  methods: {
    // 选择赛季
    chooseSeason() {
      this.isShowSeasonDialog = true;
    },
    changeSeason(val) {
      // console.log(val);
      this.curSeason = this.seasonList[
        this.seasonList.findIndex((item) => +item.id === val)
      ];
      // console.log("2" + this.curSeason);
      this.openLoading();
      this.requestSeasonBestPlayer();
      this.requestSeasonBestPlayerRank();
      this.requestSeasonPlayoffTeamTop();
      this.requestSeasonTeamRank();
      this.cancelLoading();
      this.isShowSeasonDialog = false;
    },
    // 选择球队
    chooseTeam() {
      this.isShowTeamDialog = true;
    },
    changeTeam(val) {
      //console.log("#"+val);
      this.curTeam = this.teamList[
        this.teamList.findIndex((item) => item === val)
      ];
      // console.log("*" + this.curTeam);
      
      this.request();
      this.requestTeamHistory();
      this.requestTeamPlayerSalary();
      this.cancelLoading();
      this.isShowTeamDialog = false;
    },
    // 选择球员
    choosePlayer() {
      this.isShowPlayerDialog = true;
    },
    changePlayer(val) {
      // console.log(val);
      this.curPlayer = this.playerList[
        this.playerList.findIndex((item) => +item.id === val)
      ];
      this.curPlayer.image = imgMap[this.curPlayer.name];
      // console.log(this.curPlayer);
      this.openLoading();
      this.requestPlayerHistoryAgg();
      this.requestPlayerHistory();
      this.cancelLoading();
      this.isShowPlayerDialog = false;
    },
    updateTimeFn() {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    openLoading() {
      this.loading = true;
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 2000);
    },

    requstSeasonList() {
      this.$http.get(`${BASE_URL}/season/season_list`).then((response) => {
        let res = response.data || {};
        if (+res.error_code === 0) {
          this.seasonList = res.data.season_list || [];
        }
      });
    },
    requestTeamList() {
      this.$http
        .get(`${BASE_URL}/team/team_list`)
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            this.teamList = res.data.team_list || [];
            //console.log("##"+this.teamList)
          }
          return res.data.team_list;
        })
        .then(() => {
          // let list = [];
          // teams.forEach((team) => {
          //   list.push(
          //     this.$http("http://xx.com/team/group_data", {
          //       params: { team_id: team.id },
          //     })
          //   );
          // });
          // Promise.all(list)
          //   .then((resList) => {
          //     console.log(resList);
          //     this.renderTeamAll(resList.map((item) => item.data.data));
          //   })
          //   .catch((err) => {
          //     console.error(err);
          //   });
        });
    },
    requestSeasonBestPlayer() {
      this.$http
        .get(`${BASE_URL}/season/best_player`, {
          params: { season_name: this.curSeason.name },
        })
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            this.curSeasonBestPlayer.mvp = res.data.mvp || {};
            this.curSeasonBestPlayer.score = res.data.score || {};
            this.curSeasonBestPlayer.backboard = res.data.backboard || {};
            this.curSeasonBestPlayer.three_point = res.data.three_point || {};
            this.curSeasonBestPlayer.assist = res.data.assist || {};

            // this.curSeasonBestPlayer.mvp.image =
            //   BASE_PLAYER_IMAGE_URL + this.curSeasonBestPlayer.mvp.name + ".jpg";
            this.curSeasonBestPlayer.mvp.image =
              imgMap[this.curSeasonBestPlayer.mvp.name];
            this.curSeasonBestPlayer.score.image =
              imgMap[this.curSeasonBestPlayer.score.name];
            this.curSeasonBestPlayer.backboard.image =
              imgMap[this.curSeasonBestPlayer.backboard.name];
            this.curSeasonBestPlayer.three_point.image =
              imgMap[this.curSeasonBestPlayer.three_point.name];
            this.curSeasonBestPlayer.assist.image =
              imgMap[this.curSeasonBestPlayer.assist.name];

            // this.curSeasonBestPlayer.backboard.image =
            //   BASE_PLAYER_IMAGE_URL + this.curSeasonBestPlayer.backboard.name + ".jpg";
            // this.curSeasonBestPlayer.three_point.image =
            //   BASE_PLAYER_IMAGE_URL + this.curSeasonBestPlayer.three_point.name + ".jpg";
            // this.curSeasonBestPlayer.assist.image =
            //   BASE_PLAYER_IMAGE_URL + this.curSeasonBestPlayer.assist.name + ".jpg";
            // console.log(this.curSeasonBestPlayer.mvp.image)
          }
        });
    },
    requestSeasonPlayoffTeamTop() {
      this.$http
        .get(`${BASE_URL}/season/playoff_team_top`, {
          params: { season_name: this.curSeason.name },
        })
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            let team_list = res.data.team_list;
            this.renderTeamRaceTop(team_list);
          }
        });
    },
    requestPlayList() {
      this.$http
        .get(`${BASE_URL}/player/player_list`)
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            this.playerList = res.data.player_list || [];
          }
          return res.data.player_list;
        })
        .then(() => {
          // let list = [];
          // players.forEach((player) => {
          //   list.push(
          //     this.$http("http://xx.com/player/season", {
          //       params: { player_id: player.id, season_id: this.curSeason.id },
          //     })
          //   );
          // });
          // Promise.all(list)
          //   .then((resList) => {
          //     console.log(resList);
          //     this.bestWorthPlayer(
          //       players.map((item) => item.name),
          //       resList.map((item) => item.data.data)
          //     );
          //   })
          //   .catch((err) => {
          //     console.error(err);
          //   });
        });
    },
    requestSeasonBestPlayerRank() {
      this.$http
        .get(`${BASE_URL}/season/best_player_rank`, {
          params: { season_name: this.curSeason.name },
        })
        .then((response) => {
          let res = response.data || {};
          // console.log(res);
          if (+res.error_code === 0) {
            let player_list = res.data.player_list;
            // console.log(player_list);
            this.bestWorthPlayer(
              player_list.map((item) => item.name),
              player_list
            );
          }
        });
    },
    requestSeasonTeamRank() {
      this.$http
        .get(`${BASE_URL}/season/team_rank`, {
          params: { season_name: this.curSeason.name },
        })
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            let data = res.data || {};
            // console.log(data);
            this.renderTeamWinTop6(data.win_rank);
            this.renderTeamScoreTop6(data.score_rank);
            this.renderTeamCapTop6(data.cap_rank);
            this.renderTeamLosTop6(data.los_rank);
          }
        });
    },
    requestTeamHistory() {
      this.$http
        .get(`${BASE_URL}/team/history`, {
          params: { team_name: this.curTeam },
        })
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            let history_list = res.data.history_list;
            // console.log(history_list)
            this.renderTeamHistory(history_list);
            this.renderTeamThreePointHistory(history_list);
            this.renderWinRate(history_list);
          }
        });
    },
    requestPlayerHistoryAgg() {
      this.$http
        .get(`${BASE_URL}/player/history_agg`, {
          params: { player_name: this.curPlayer.name },
        })
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            let playerData = res.data;
            this.renderPlayerAttribute(playerData);
            this.renderPlayerShotRate(playerData);
          }
        });
    },
    requestTeamPlayerSalary() {
      this.$http
        .get(`${BASE_URL}/team/player_salary`, {
          params: { team_name: this.curTeam },
        })
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            let player_list = res.data.player_list;
            this.renderTeamSalaryTop6(player_list);
            this.renderTeamSalaryAndScore(player_list);
          }
        });
    },
    requestPlayerHistory() {
      this.$http
        .get(`${BASE_URL}/player/history`, {
          params: { player_name: this.curPlayer.name },
        })
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            let year_list = res.data.year_list;
            // console.log(year_list);
            year_list.reverse();
            // console.log(year_list);
            this.contriValue(year_list);
            this.zoneHitRatioRange(year_list);
          }
        });
    },

    requestBestTeam() {
      this.$http
        .get(`${BASE_URL}/history/best_team`)
        .then((response) => {
          let res = response.data || {};
          if (+res.error_code === 0) {
            let win_rank = res.data.win_rank || {};
            this.winTeamMax = win_rank;
            let score_rank = res.data.score_rank || {};
            this.scoreTeamMax = score_rank;
            let home_win_rank = res.data.home_win_rank || {};
            this.mainWinTeamMax = home_win_rank;
            let away_win_rank = res.data.away_win_rank || {};
            this.secondWinTeamMax = away_win_rank;
            let lose_rank = res.data.lose_rank || {};
            this.loseTeamMax = lose_rank;

            console.log("1" + this.winTeamMax.name);
            this.winTeamMax.name1 = imgMap[this.winTeamMax.name];
            this.scoreTeamMax.name1 = imgMap[this.scoreTeamMax.name];
            this.mainWinTeamMax.name1 = imgMap[this.mainWinTeamMax.name];
            this.secondWinTeamMax.name1 = imgMap[this.secondWinTeamMax.name];
            this.loseTeamMax.name1 = imgMap[this.loseTeamMax.name];
            // this.curSeasonBestPlayer.score.image =imgMap[this.curSeasonBestPlayer.score.name];
            // this.curSeasonBestPlayer.backboard.image =imgMap[this.curSeasonBestPlayer.backboard.name];
            // this.curSeasonBestPlayer.three_point.image =imgMap[this.curSeasonBestPlayer.three_point.name];
            // this.curSeasonBestPlayer.assist.image =imgMap[this.curSeasonBestPlayer.assist.name];
          }
        })
        .catch((err) => console.error(err));
    },

    requestTeamHistoryData() {
      this.$http.get(`${BASE_URL}/history/teams_data`).then((response) => {
        let res = response.data || {};
        if (+res.error_code === 0) {
          let teamList = res.data.team_list || [];
          this.renderTeamAll(teamList);
          this.renderWinHistory(teamList);
        }
      });
    },

    request() {
      this.$nextTick(() => {
        this.requestBestTeam();
        this.requestTeamHistoryData();
        this.requestSeasonBestPlayer();
        this.requestSeasonBestPlayerRank();
        this.requestSeasonPlayoffTeamTop();
        this.requestSeasonTeamRank();
        this.requestTeamHistory();
        this.requestTeamList();
        this.requestTeamPlayerSalary();
        this.requestPlayerHistoryAgg();
        this.requestPlayerHistory();
      });
    },

    renderTeamSalaryAndScore(data) {
      let category = "";
      let datas = [];
      let score = [];
      if (!data || data.length <= 0) {
        category = ["GSW", "SAS", "CLE", "TOR", "LAC", "OKC"];
        datas = [45, 52, 64, 32, 77, 88, 99];
        score = [90, 90, 100, 100, 100, 100, 100];
      } else {
        category = data.map((item) => item.name);
        datas = data.map((item) => item.salary);
        score = data.map((item) => (item.score / 10 * -1));
      }
      var teamSalaryAndScoreChart = this.$echarts.init(
        document.getElementById("teamSalaryAndScore")
      );
      var option = {
        // grid: [
        //   { x: "7%", y: "7%" },
        //   { x2: "7%", y: "7%", right: "10%"},
        // ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter(params) {
            return `${params[0].marker}${params[0].seriesName}:${
              params[0].value
            }千万美元<br/>${params[1].marker}${params[1].seriesName}:${Math.abs(
              params[1].value * 10
            )}`;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            position: "bottom",
            inverse: true,
            axisLabel: {
              //formatter: '{value} %'
              formatter(value) {
                if (value < 0) {
                  return Math.abs(value);
                }
                console.log(value);
                return Math.abs(value); // 负数取绝对值变正数
              },
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
          // {
          //   type: "value",
          //   min: function(value) {
          //     return -value.max;
          //   },
          //   nameTextStyle: {
          //     padding: 25,
          //     color: "#fff",
          //   },
          //   position: "bottom",
          //   nameLocation: "middle",
          //   splitLine: { show: false },
          //   axisLine: {
          //     lineStyle: {
          //       //color: '#f8f106'
          //     },
          //   },
          //   axisLabel: {
          //     formatter: "{value}",
          //     showMaxLabel: false,
          //     textStyle: {
          //       fontSize: 12, //y轴坐标轴上的字体大小
          //       color: "#fff",
          //     },
          //   },
          // },
        ],
        yAxis: [
          {
            type: "category",
            data: category,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid",
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate:50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
          },
        ],
        series: [
          {
            name: "薪资",
            type: "bar",
            data: datas,
            stack: "球员",
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: "35%", //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: "#e67e22",
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
          {
            name: "得分",
            type: "bar",
            data: score,
            stack: "球员",
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: "35%", //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: "#0184d5",
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
        ],
      };
      teamSalaryAndScoreChart.setOption(option);
    },
    renderTeamSalaryTop6(data) {
      let category = "";
      let datas = [];
      let percent = [];
      if (!data || data.length <= 0) {
        category = ["GSW", "SAS", "CLE", "TOR", "LAC", "OKC"];
        datas = [45, 52, 64, 32, 77, 88, 99];
        percent = [90, 90, 100, 100, 100, 100, 100];
      } else {
        category = data.map((item) => item.name);
        datas = data.map((item) => item.salary);
        percent = data.map((item) => item.percent * 100);
      }
      var teamSalaryTop6Chart = this.$echarts.init(
        document.getElementById("teamSalaryTop6")
      );
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: category,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid",
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate:50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            gridIndex: 0, //对应grid的索引位置（第1个）
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
          {
            type: "value",
            gridIndex: 0, //对应grid的索引位置（第1个）
            name: "百分比",
            nameTextStyle: {
              padding: 25,
              color: "#fff",
            },
            position: "right",
            nameLocation: "middle",
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                //color: '#f8f106'
              },
            },
            axisLabel: {
              formatter: "{value}",
              showMaxLabel: false,
              textStyle: {
                fontSize: 12, //y轴坐标轴上的字体大小
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "薪资",
            type: "bar",
            data: datas,
            xAxisIndex: 0,
            yAxisIndex: 0,
            barWidth: "35%", //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: "#e67e22",
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
          {
            name: "百分比",
            data: percent,
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 1,
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "#0184d5",
                width: 2,
              },
            },
            itemStyle: {
              normal: {
                color: "#0184d5",
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 12,
              },
            },
          },
        ],
      };
      teamSalaryTop6Chart.setOption(option);
    },
    renderWinHistory(data) {
      if (!data) {
        data = [
          {
            name: "NBA",
            value: 366,
          },
        ];
      } else {
        data = data.map((item) => ({ name: item.name, value: item.total_win }));
      }
      let chart = this.$echarts.init(document.querySelector("#winHistory"));
      let option = {
        series: [
          {
            type: "wordCloud",
            shape: "circle",
            left: "center",
            top: "center",
            width: "70%",
            height: "80%",
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [-90, 90],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            textStyle: {
              normal: {
                fontFamily: "sans-serif",
                fontWeight: "bold",
                fontSize: "12",
                color: function () {
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 250),
                      Math.round(Math.random() * 250),
                      Math.round(Math.random() * 250),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            data,
          },
        ],
      };
      chart.setOption(option);
    },
    renderTeamWinTop6(data) {
      let category = "";
      let datas = [];
      if (!data || data.length <= 0) {
        category = ["GSW", "SAS", "CLE", "TOR", "LAC", "OKC"];
        datas = [45, 52, 64, 32, 77, 88, 99];
      } else {
        category = data.map((item) => item.name);
        datas = data.map((item) => item.count);
      }
      var teamHistoryChart = this.$echarts.init(
        document.getElementById("teamWinTop6")
      );
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: category,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid",
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate:50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: datas,
            barWidth: "35%", //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: "#e67e22",
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
        ],
      };
      teamHistoryChart.setOption(option);
    },
    renderTeamScoreTop6(data) {
      let category = "";
      let datas = [];
      if (!data) {
        category = ["GSW", "SAS", "CLE", "TOR", "LAC", "OKC"];
        datas = [45, 52, 64, 32, 77, 88, 99];
      } else {
        category = data.map((item) => item.name);
        datas = data.map((item) => item.count);
      }
      var teamHistoryChart = this.$echarts.init(
        document.getElementById("teamSocreTop6")
      );
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: category,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid",
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate:50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: datas,
            barWidth: "35%", //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: "#2ecc71",
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
        ],
      };
      teamHistoryChart.setOption(option);
    },
    renderTeamCapTop6(data) {
      let category = "";
      let datas = [];
      if (!data) {
        category = ["GSW", "SAS", "CLE", "TOR", "LAC", "OKC"];
        datas = [45, 52, 64, 32, 77, 88, 99];
      } else {
        category = data.map((item) => item.name);
        datas = data.map((item) => item.count);
      }
      var teamHistoryChart = this.$echarts.init(
        document.getElementById("teamCapTop6")
      );
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: category,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid",
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate:50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: datas,
            barWidth: "35%", //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: "#8e44ad",
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
        ],
      };
      teamHistoryChart.setOption(option);
    },

    renderTeamLosTop6(data) {
      let category = "";
      let datas = [];
      if (!data) {
        category = ["GSW", "SAS", "CLE", "TOR", "LAC", "OKC"];
        datas = [45, 52, 64, 32, 77, 88, 99];
      } else {
        category = data.map((item) => item.name);
        datas = data.map((item) => item.count);
      }
      var chart = this.$echarts.init(document.getElementById("teamLosTop6"));
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: category,
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid",
              },
            },

            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              // rotate:50,
              show: true,
              splitNumber: 15,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              //formatter: '{value} %'
              show: true,
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: "12",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.1	)",
                width: 1,
                type: "solid",
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            type: "bar",
            data: datas,
            barWidth: "35%", //柱子宽度
            // barGap: 1, //柱子之间间距
            itemStyle: {
              normal: {
                color: "#c0392b",
                opacity: 1,
                barBorderRadius: 5,
              },
            },
          },
        ],
      };
      chart.setOption(option);
    },

    renderTeamHistory(data) {
      let category = "";
      let datas = [];
      if (!data) {
        category = ["2020", "2020", "2020", "2020", "2020", "2020"];
        datas = [45, 52, 64, 32, 77, 88, 99];
      } else {
        category = data.map((item) => item.year);
        category.reverse();
        datas = data.map((item) => item.score);
      }
      var teamHistoryChart = this.$echarts.init(
        document.getElementById("teamHistory")
      );
      var option = {
        //textStyle: { color: "white" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b",
            },
          },
        },
        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
            data: category,
          },
          {
            axisPointer: { show: false },
            axisLine: { show: false },
            position: "bottom",
            offset: 20,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "球队得分数",
            data: datas,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#73DDFF",
                borderColor: "#73DDFF",
                borderWidth: 5,
              },
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      teamHistoryChart.setOption(option);
    },
    renderTeamThreePointHistory(data) {
      let category = "";
      let datas = [];
      if (!data) {
        category = ["2020", "2020", "2020", "2020", "2020", "2020"];
        datas = [45, 52, 64, 32, 77, 88, 99];
      } else {
        category = data.map((item) => item.year);
        category.reverse();
        datas = data.map((item) => item.three_point);
      }
      var teamShotRateChart = this.$echarts.init(
        document.getElementById("teamThreePoint")
      );
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#dddc6b",
            },
          },
        },
        grid: {
          left: "10",
          top: "30",
          right: "10",
          bottom: "10",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            //boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.2)",
              },
            },
            data: category,
          },
          {
            axisPointer: { show: false },
            axisLine: { show: false },
            position: "bottom",
            offset: 20,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "rgba(255,255,255,.6)",
                fontSize: 12,
              },
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,.1)",
              },
            },
          },
        ],
        series: [
          {
            name: "球队三分命中",
            data: datas,
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#F56948",
                borderColor: "#F56948",
                borderWidth: 5,
              },
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      teamShotRateChart.setOption(option);
    },
    renderPlayerShotRate(data) {
      let datas = [];
      if (!data) {
        datas = [
          {
            value: 335,
            name: "三分",
          },
          {
            value: 310,
            name: "罚球",
          },
          {
            value: 234,
            name: "篮板",
          },
          {
            value: 100,
            name: "近距",
          },
          {
            value: 135,
            name: "中距",
          },
          {
            value: 148,
            name: "远距",
          },
        ];
      } else {
        datas = [
          {
            value: data.three_point_hit * 100,
            name: "三分",
          },
          {
            value: data.penalty_hit * 100,
            name: "罚球",
          },
          {
            value: data.backboard_hit * 100,
            name: "篮板",
          },
          {
            value: data.near_hit * 100,
            name: "近距",
          },
          {
            value: data.middle_hit * 100,
            name: "中距",
          },
          {
            value: data.long_hit * 100,
            name: "远距",
          },
        ];
      }

      var plaerShotRateChart = this.$echarts.init(
        document.getElementById("playerShotRate")
      );
      var option = {
        // backgroundColor: "#273454",
        color: ["#cd4692", "#9658c3", "#6c6be2", "#01aebf", "#18b794"],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}$ ({d}%)",
          textStyle: {
            fontSize: 16,
          },
        },
        // legend: {
        //   data: ["三分", "罚球", "篮板", "中距", "远距"],
        //   orient: "vertical",
        //   right: "5%",
        //   top: "13%",
        //   itemWidth: 50,
        //   itemHeight: 50,
        //   itemGap: 30,
        //   textStyle: {
        //     color: "#",
        //     fontSize: 16,
        //   },
        // },
        series: [
          {
            name: "球员各位置命中率",
            type: "pie",
            clockwise: false,
            startAngle: 90,
            radius: "75%",
            center: ["44%", "50%"],
            hoverAnimation: false,
            roseType: "radius", //area
            data: datas,
            itemStyle: {
              normal: {
                borderColor: "#273454",
                borderWidth: "5",
              },
            },
            label: {
              show: true,
              position: "outside",
              formatter: "{a|{b}：{d}%}\n{hr|}",
              rich: {
                hr: {
                  backgroundColor: "t",
                  borderRadius: 100,
                  width: 0,
                  height: 10,
                  padding: [3, 3, 0, -16],
                  shadowColor: "#1c1b3a",
                  shadowBlur: 1,
                  shadowOffsetX: "0",
                  shadowOffsetY: "2",
                },
                a: {
                  padding: [-35, 15, -20, 5],
                },
              },
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 30,
                lineStyle: {
                  width: 1,
                },
              },
            },
          },
        ],
      };
      plaerShotRateChart.setOption(option);
    },
    renderPlayerAttribute(data) {
      var playerAttributeChart = this.$echarts.init(
        document.getElementById("playerAttribute")
      );

      // var dataMax = 1;
      const source = {
        data: [0, 0, 0, 0, 0, 0, 0],
        indicator: [
          { name: "三分命中率", max: 1, key: "three_point_hit" },
          { name: "助攻", max: 10, key: "assist" },
          { name: "失误", max: 22, key: "mistake" },
          { name: "得分", max: 30, key: "score" },
          { name: "投篮命中率", max: 1, key: "penalty_hit" },
          { name: "抢断", max: 3, key: "steal" },
          { name: "篮板", max: 13, key: "backboard" },
        ],
      };

      let datas = [];
      if (!data) {
        datas = [0, 0, 0, 0, 0, 0, 0];
      } else {
        for (let indicator of source.indicator) {
          datas.push(data[indicator.key]);
        }
      }
      source.data = datas;
      const buildSeries = function (data) {
        const helper = data.map((item, index) => {
          const arr = new Array(data.length);
          arr.splice(index, 1, item);
          return arr;
        });

        return [data, ...helper].map((item, index) => {
          return {
            type: "radar",
            itemStyle: {
              color: "#31e586",
            },
            lineStyle: {
              color: index === 0 ? "#31e586" : "transparent",
            },
            areaStyle: {
              color: index === 0 ? "#31e586" : "transparent",
              opacity: 0.3,
            },
            tooltip: {
              show: index === 0 ? false : true,
              formatter: function () {
                let suffix =
                  source.indicator[index - 1].key === "three_point_hit" ||
                  source.indicator[index - 1].key === "penalty_hit";

                return `${source.indicator[index - 1].name}${
                  suffix ? source.data[index - 1] * 100 : source.data[index - 1]
                }${suffix ? "%" : ""}`;
              },
            },
            z: index === 0 ? 1 : 2,
            data: [item],
          };
        });
      };

      var option = {
        // backgroundColor: "#080b30",
        tooltip: {},
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              fontSize: 14,
              color: ["#d1dbf2"],
              padding: [3, 5],
            },
          },
          splitNumber: 4,
          splitArea: {
            show: true,
            areaStyle: {
              color: [
                "rgba(12,62,129,0)",
                "rgba(12,62,129,0.3)",
                "rgba(12,62,129,0)",
                "rgba(12,62,129,0)",
              ],
            },
          },
          splitLine: {
            lineStyle: {
              color: "#95a5a6",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#95a5a6",
            },
          },
          indicator: source.indicator,
        },
        series: buildSeries(source.data),
      };
      playerAttributeChart.setOption(option);
    },
    renderTeamAll(teamList) {
      if (teamList == null) return;
      let datas = [];

      datas = teamList.map((team) => {
        return {
          name: `${team.name}`,
          value: [team.average_win, team.average_win, team.average_win_rate],
        };
      });
      var chart = this.$echarts.init(document.getElementById("teamAll"));

      this.renderTeamAll_option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        series: [
          {
            type: "treemap",
            width: "100%",
            height: "95%",
            top: "5%",
            roam: false, //是否开启拖拽漫游（移动和缩放）
            nodeClick: false, //点击节点后的行为,false无反应
            breadcrumb: {
              show: false,
            },
            label: {
              //描述了每个矩形中，文本标签的样式。
              show: true,
              position: ["20%", "20%"],
              fontSize: "200%",
              color: "#fff",
            },
            tooltip: {
              formatter: ({ name, value }) =>
                `${name}<br/>平均胜场:${value[0]}<br/>平均得分:${value[1]}<br/>平均胜率:${value[2]}`,
              textStyle: {
                fontSize: "200%",
              },
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "transparent",
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            data: datas,
          },
        ],
      };
      chart.setOption(this.renderTeamAll_option);
    },
    renderTeamRaceTop(source) {
      let datas = [];
      if (!source) {
        for (let i = 0; i < 23; i++) {
          let data = {
            name: "team" + i,
            value: 80 + i,
          };
          datas.push(data);
        }
      } else {
        datas = source.map((item) => {
          return {
            name: `${item.name}`,
            value: item.win_los_diff,
          };
        });
      }
      var chart = this.$echarts.init(document.getElementById("teamRaceTop"));

      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{b}",
        },
        series: [
          {
            type: "treemap",
            width: "100%",
            height: "95%",
            top: "5%",
            roam: false, //是否开启拖拽漫游（移动和缩放）
            nodeClick: false, //点击节点后的行为,false无反应
            breadcrumb: {
              show: false,
            },
            label: {
              //描述了每个矩形中，文本标签的样式。
              show: true,
              position: ["10%", "10%"],
              fontSize: "200%",
              color: "#fff",
              formatter: (params) => {
                return `${params.name}\n\n${params.value}`;
              },
            },
            tooltip: {
              formatter: ({ name, value }) =>
                `${name}<br/>胜负差小于5的比赛:${value}`,
              textStyle: {
                fontSize: "200%",
              },
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: "transparent",
              emphasis: {
                label: {
                  show: true,
                },
              },
            },
            data: datas,
          },
        ],
      };
      chart.setOption(option);
    },
    renderWinRate(data) {
      let category = "";
      let winData = [];
      if (!data) {
        category = ["2020", "2020", "2020", "2020", "2020", "2020"];
        winData = [45, 52, 64, 32, 77, 88, 99];
      } else {
        category = data.map((item) => item.year);
        category.reverse();
        winData = data.map((item) => item.win);
        // scoreData = data.map((item) => item.score);
      }
      var winRateChart = this.$echarts.init(
        document.getElementById("teamWinRate")
      );
      var option = {
        textStyle: { color: "white" },
        color: ["#cd4692", "#01aebf", "#18b794"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: category,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
        },
        series: [
          {
            type: "line",
            data: winData,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      winRateChart.setOption(option);
    },
    renderwinRate2() {
      var winRateChart2 = this.$echarts.init(
        document.getElementById("winRate2")
      );
      var option = {
        textStyle: { color: "#666" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "2007",
            "2008",
            "2009",
            "2010",
            "2011",
            "2012",
            "2013",
            "2014",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            symbolSize: 20,
            type: "scatter",
            data: [99, 103, 98, 97, 102, 101, 103],
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            symbolSize: 20,
            type: "scatter",
            data: [100, 97, 97, 102, 103, 104, 99],
          },
          {
            type: "line",
            data: [56, 53, 55, 59, 36, 72, 58, 57, 68, 39],
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
          {
            type: "line",
            data: [45, 39, 28, 30, 25, 42, 46, 57, 72, 39],
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      winRateChart2.setOption(option);
    },
    bestWorthPlayer(xAxis, data) {
      let seriesData1 = "";
      let seriesData2 = "";
      let seriesData3 = "";
      let seriesData4 = "";
      if (!xAxis) {
        xAxis = ["Jack", "ROse", "kaloia", "Selia", "wudan", "Dails"];
        data = [200.0, 40.9, 70.0, 103.2];
      } else {
        seriesData1 = data.map((item) => item.per);
        seriesData2 = data.map((item) => item.attack);
        seriesData3 = data.map((item) => item.defence);
        seriesData4 = data.map((item) => item.ws);
      }

      var bestWorthPlayerChart = this.$echarts.init(
        document.getElementById("bestWorthPlayer")
      );
      var option = {
        textStyle: { color: "#666" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        dataZoom: [
          {
            type: "slider",
            show: true,
            xAxisIndex: [0, 1, 2, 3],
            left: "10%",
            start: 0,
            bottom: -20,
            end: 100, //初始化滚动条
          },
        ],
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true },
        //   },
        // },
        color: [
          "#D38267",
          "#333333",
          "red",
          "blue",
          "#8435DE",
          "green",
          "#3B99FB",
          "#999999",
        ],
        //有几个图，就有几个grid,从上往下排
        grid: [
          { x: "7%", y: "7%", height: "20%", left: "10%", top: "5%" },
          { x: "7%", y2: "7%", height: "20%", left: "10%", bottom: "55%" },
          { x: "7%", y2: "7%", height: "20%", left: "10%", bottom: "35%" },
          { x: "7%", y2: "7%", height: "20%", left: "10%", bottom: "15%" },
        ],
        // legend: {
        // 	data:['PM₂.₅','PM₁₀','SO₂','NO₂','CO','O₃','AQI','AQI1']
        // },
        xAxis: [
          {
            type: "category", //PM2.5和PM10 X轴
            gridIndex: 0, //对应grid的索引位置（第1个）
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
          },
          {
            type: "category", //SO2 和NO2 X轴
            gridIndex: 1, //对应grid的索引位置（第2个）
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
          },
          {
            type: "category", //CO和O3 X轴
            gridIndex: 2, //对应grid的索引位置（第3个）
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              show: false,
            },
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
          },
          {
            type: "category", //AQI X轴
            gridIndex: 3, //对应grid的索引位置（第4个）
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              interval: 0,
              color: "#fff",
              //rotate: 38,
              formatter(value) {
                return value.split(" ")[0];
              },
            },
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
          },
        ],
        //y轴

        yAxis: [
          {
            type: "value",
            gridIndex: 0, //对应grid的索引位置（第1个）
            name: "PER",
            nameTextStyle: {
              padding: 25,
              color: "#fff",
            },
            position: "left",
            nameLocation: "middle",
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
            axisLabel: {
              formatter: "{value}",
              showMaxLabel: false,
              textStyle: {
                fontSize: 12, //y轴坐标轴上的字体大小
                color: "#fff",
              },
            },
          },
          {
            type: "value",
            gridIndex: 1, //对应grid的索引位置（第2个）
            name: "进攻效",
            nameTextStyle: {
              padding: 25,
              color: "#fff",
            },
            nameLocation: "middle",
            position: "right",
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
            axisLabel: {
              formatter: "{value}",
              showMaxLabel: false,
              textStyle: {
                fontSize: 12, //y轴坐标轴上的字体大小
                color: "#fff",
              },
            },
          },
          {
            type: "value",
            gridIndex: 2, //对应grid的索引位置（第3个）
            nameLocation: "middle",
            name: "防守效",
            nameTextStyle: {
              padding: 25,
              color: "#fff",
            },
            splitLine: { show: false },
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
            axisLabel: {
              formatter: "{value}",
              showMaxLabel: false,
              textStyle: {
                fontSize: 12, //y轴坐标轴上的字体大小
                color: "#fff",
              },
            },
          },
          {
            type: "value",
            gridIndex: 3, //对应grid的索引位置（第4个）
            name: "WS",
            //nameLocation:'end',
            splitLine: { show: false },
            nameLocation: "middle",
            nameTextStyle: {
              padding: 25,
              color: "#fff",
            },

            position: "right",
            axisLine: {
              lineStyle: {
                color: "#0C49D3",
              },
            },
            axisLabel: {
              formatter: "{value}",
              showMaxLabel: false,
              textStyle: {
                fontSize: 12, //y轴坐标轴上的字体大小
                color: "#fff",
              },
            },
          },
          // {
          //   type: "value",
          //   gridIndex: 2, //对应grid的索引位置（第5个）
          //   name: "助攻",
          //   nameTextStyle: {
          //     padding: 25,
          //     color: "#fff",
          //   },
          //   position: "left",
          //   nameLocation: "middle",
          //   splitLine: { show: false },
          //   axisLine: {
          //     lineStyle: {
          //       //color: '#f8f106'
          //     },
          //   },
          //   axisLabel: {
          //     formatter: "{value}",
          //     showMaxLabel: false,
          //     textStyle: {
          //       fontSize: 12, //y轴坐标轴上的字体大小
          //       color: "#fff",
          //     },
          //   },
          // },
          // {
          //   type: "value",
          //   gridIndex: 2, //对应grid的索引位置（第6个）
          //   name: "篮板",
          //   nameTextStyle: {
          //     padding: 25,
          //     color: "#fff",
          //   },
          //   nameLocation: "middle",
          //   position: "right",
          //   splitLine: { show: false },
          //   axisLine: {
          //     lineStyle: {
          //       //color: colors[1]
          //     },
          //   },
          //   axisLabel: {
          //     formatter: "{value}",
          //     showMaxLabel: false,
          //     textStyle: {
          //       fontSize: 12, //y轴坐标轴上的字体大小
          //       color: "#fff",
          //     },
          //   },
          // },
          // {
          //   type: "value",
          //   gridIndex: 3, //对应grid的索引位置（第7个）
          //   name: "三分命中",
          //   nameTextStyle: {
          //     padding: 25,
          //     color: "#fff",
          //   },
          //   nameLocation: "middle",
          //   position: "left",
          //   splitLine: { show: false },
          //   axisLine: {
          //     lineStyle: {
          //       //color: colors[1]
          //     },
          //   },
          //   axisLabel: {
          //     formatter: "{value}",
          //     showMaxLabel: false,
          //     textStyle: {
          //       fontSize: 12, //y轴坐标轴上的字体大小
          //       color: "#fff",
          //     },
          //   },
          // },
        ],
        series: [
          {
            name: "per",
            type: "bar",
            smooth: true,
            xAxisIndex: 0, //对应grid的索引位置（第1个）
            yAxisIndex: 0, //对应yAxis的索引位置（第1个）
            data: seriesData1 ? seriesData1 : data,
            // barCategoryGap: "50%",
            barWidth: 50,
          },
          {
            name: "进攻数",
            type: "bar",
            smooth: true,
            xAxisIndex: 1, //对应grid的索引位置（第1个）
            yAxisIndex: 1, //对应yAxis的索引位置（第2个）
            data: seriesData2 ? seriesData2 : data,
            // barCategoryGap: "50%",
            barWidth: 50,
          },
          {
            name: "防守数",
            type: "bar",
            smooth: true,
            xAxisIndex: 2, //对应grid的索引位置（第2个）
            yAxisIndex: 2, //对应yAxis的索引位置（第3个）
            data: seriesData3 ? seriesData3 : data,
            // barCategoryGap: "50%",
            barWidth: 50,
          },
          {
            name: "球员胜利贡献值",
            type: "bar",
            smooth: true,
            itemStyle: {
              normal: {
                color: "#f1c40f",
              },
            },
            xAxisIndex: 3, //对应grid的索引位置（第2个）
            yAxisIndex: 3, //对应yAxis的索引位置（第4个）
            data: seriesData4 ? seriesData4 : data,
            // barCategoryGap: "50%",
            barWidth: 50,
          },
          // {
          //   name: "助攻",
          //   type: "bar",
          //   smooth: true,
          //   xAxisIndex: 2, //对应grid的索引位置（第3个）
          //   yAxisIndex: 4, //对应yAxis的索引位置（第5个）
          //   data: seriesData5 ? seriesData5 : data,
          //   // barCategoryGap: "50%",
          //   barWidth: 20,
          // },
          // {
          //   name: "篮板",
          //   type: "bar",
          //   smooth: true,
          //   xAxisIndex: 2, //对应grid的索引位置（第3个）
          //   yAxisIndex: 5, //对应yAxis的索引位置（第6个）
          //   data: seriesData6 ? seriesData6 : data,
          //   // barCategoryGap: "50%",
          //   barWidth: 20,
          // },

          // {
          //   name: "三分命中",
          //   type: "bar",
          //   smooth: true,
          //   xAxisIndex: 3, //对应grid的索引位置（第4个）
          //   yAxisIndex: 6, //对应yAxis的索引位置（第7个）
          //   data: seriesData7 ? seriesData7 : data,
          //   barWidth: 40,
          // },
        ],
      };
      bestWorthPlayerChart.setOption(option);
    },
    contriValue(data) {
      let category = [];
      let datas = [];
      if (!data) {
        category = [
          "09-10",
          "10-11",
          "11-12",
          "12-13",
          "13-14",
          "14-15",
          "15-16",
          "16-17",
        ];
        datas = [14, 16.4, 21.1, 23, 23.5, 26.7, 25.3, 27.3];
      } else {
        category = data.map((item) => item.year);
        datas = data.map((item) => item.per);
      }
      var contriValueChart = this.$echarts.init(
        document.getElementById("contributionValue")
      );
      var option = {
        textStyle: { color: "white" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: category,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          min: 10,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
        },
        series: [
          {
            type: "line",
            data: datas,
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      contriValueChart.setOption(option);
    },
    zoneHitRatioRange(data) {
      let category = [];
      let datas = [];
      if (!data) {
        category = [
          "09-10",
          "10-11",
          "11-12",
          "12-13",
          "13-14",
          "14-15",
          "15-16",
          "16-17",
        ];
        datas = [14, 16.4, 21.1, 23, 23.5, 26.7, 25.3, 27.3];
      } else {
        category = data.map((item) => item.year);
        datas = data.map((item) => item.shot_rate);
      }
      var zoneHitRatioChart = this.$echarts.init(
        document.getElementById("zoneHitRatio")
      );
      var option = {
        textStyle: { color: "white" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "0%",
          top: "10px",
          right: "0%",
          bottom: "4%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: category,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          min:0.5,
          axisLabel: {
            textStyle: {
              color: "rgba(255,255,255,.6)",
              fontSize: 12,
            },
          },
        },
        series: [
          {
            type: "line",
            data: datas,
            itemStyle: {
              normal: {
                color: "#00FF00",
              },
            },
            markLine: {
              data: [{ type: "average", name: "平均值" }],
            },
          },
        ],
      };
      zoneHitRatioChart.setOption(option);
    },
    renderTable() {},
  },
};
</script>

<style lang="scss">
.container {
  background: #000d4a center top;
  background-size: cover;
  color: #666;
  font-size: 0.1rem;
  .canvas {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 99%;
    z-index: 1;
  }
  .allnav {
    height: calc(100% - 30px);
  }
  .copyright {
    background: rgba(19, 31, 64, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 0.5rem;
    text-align: center;
    padding-right: 15px;
    bottom: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.16rem;
  }

  .time {
    position: absolute;
    right: 0.3rem;
    top: 0;
    line-height: 0.75rem;
  }
  .time img {
    width: 0.37rem;
    display: inline-block;
    vertical-align: middle;
  }
  .time span {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.18rem;
    padding-right: 0.1rem;
  }
  .loading {
    position: fixed;
    left: 0;
    top: 0;
    font-size: 18px;
    z-index: 100000000;
    width: 100%;
    height: 100%;
    background: #1a1a1c;
    text-align: center;
  }
  .loadbox {
    position: absolute;
    width: 160px;
    height: 150px;
    color: #aaa;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -75px;
  }
  .loadbox img {
    margin: 10px auto;
    display: block;
    width: 40px;
  }
  .head {
    height: 1.05rem;
    background: url("../assets/images/head_bg.png") no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    z-index: 100;
  }
  .head h1 {
    color: #fff;
    text-align: center;
    font-size: 0.4rem;
    line-height: 0.8rem;
  }
  .head h1 img {
    width: 1.5rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.2rem;
  }
  .pulll_left {
    float: left;
  }
  .pulll_right {
    float: right;
  }
  .mainbox {
    padding: 0.1rem 0.1rem 0;
  }

  .mainbox > ul {
    width: 100%;
  }
  .mainbox > ul > li {
    width: 100%;
    float: left;
    padding: 0 0.1rem;
  }

  // .mainbox > ul > li {
  //   width: 30%;
  // }
  // .mainbox > ul > li:nth-child(2) {
  //   width: 30%;
  //   padding: 0;
  // }

  .boxall {
    float: left;
    margin-left: 0.1rem;
    border: 1px solid rgba(25, 186, 139, 0.17);
    padding: 0 0.2rem 0.4rem 0.15rem;
    background: rgba(255, 255, 255, 0.04) url("../assets/images/line.png");
    background-size: 100% auto;
    position: relative;
    margin-bottom: 0.15rem;
    z-index: 10;
  }
  .boxall .star_image {
    width: 100%;
    height: 60%;
  }
  .boxall .star_image_foot {
    width: 95%;
    height: 40%;
    border: 0.01rem solid rgb(6, 101, 245);
    position: absolute;
    bottom: 0.01rem;
    margin: 0.02rem auto;
  }
  .boxall .info {
    width: 95%;
    height: 100%;
    position: absolute;
    top: 0.01rem;
    margin: 0.02rem auto;
  }
  .boxall .info .title {
    font-size: 0.2rem;
    font-family: "微软雅黑";
    color: #fff;
    margin-left: 0.03rem;
  }
  .boxall .info .text {
    text-align: center;
    margin-top: 10%;
    font-size: 0.5rem;
    font-family: "Gill Sans";
    color: #02a6b5;
  }
  .boxall .main-title {
    width: 95%;
    height: 100%;
    position: absolute;
    top: 0.01rem;
    margin: 0.02rem auto;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .boxall .main-title .title_text p {
    font-size: 0.3rem;
    color: #02a6b5;
    font-family: Arial, Helvetica, sans-serif;
  }
  .boxall .main-title .title {
    font-size: 0.3rem;
    font-family: "微软雅黑";
    color: #02a6b5;
    margin-left: 0.03rem;
  }
  .boxall .star_image_foot .title {
    font-size: 0.2rem;
    font-family: "微软雅黑";
    color: #02a6b5;
    margin-left: 0.03rem;
  }
  .boxall .star_image_foot .text {
    text-align: center;
    margin-top: 10%;
    font-size: 0.4rem;
    font-family: "Gill Sans";
    color: #02a6b5;
  }

  // .boxall:before,
  // .boxall:after {
  //   position: absolute;
  //   width: 0.1rem;
  //   height: 0.1rem;
  //   content: "";
  //   border-top: 2px solid #02a6b5;
  //   top: 0;
  // }
  // .boxall:before,
  // .boxfoot:before {
  //   border-left: 2px solid #02a6b5;
  //   left: 0;
  // }
  // .boxall:after,
  // .boxfoot:after {
  //   border-right: 2px solid #02a6b5;
  //   right: 0;
  // }

  .alltitle {
    font-size: 0.2rem;
    color: #fff;
    text-align: center;
    line-height: 0.5rem;
  }

  // .boxfoot {
  //   position: absolute;
  //   bottom: 0;
  //   width: 100%;
  //   left: 0;
  // }
  // .boxfoot:before,
  // .boxfoot:after {
  //   position: absolute;
  //   width: 0.1rem;
  //   height: 0.1rem;
  //   content: "";
  //   border-bottom: 2px solid #02a6b5;
  //   bottom: 0;
  // }

  .bar {
    background: rgba(101, 132, 226, 0.1);
    padding: 0.15rem;
  }
  .barbox li,
  .barbox2 li {
    width: 50%;
    text-align: center;
    position: relative;
    z-index: 100;
  }
  .barbox:before,
  .barbox:after {
    position: absolute;
    width: 0.3rem;
    height: 0.1rem;
    content: "";
  }
  .barbox:before {
    border-left: 2px solid #02a6b5;
    left: 0;
    border-top: 2px solid #02a6b5;
  }
  .barbox:after {
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #02a6b5;
  }

  .barbox li:first-child:before {
    position: absolute;
    content: "";
    height: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    right: 0;
    top: 25%;
  }

  .barbox {
    border: 1px solid rgba(25, 186, 139, 0.17);
    position: relative;
  }
  .barbox li {
    font-size: 0.7rem;
    color: #ffeb7b;
    padding: 0.05rem 0;
    font-family: electronicFont;
    font-weight: bold;
  }
  .barbox2 li {
    font-size: 0.19rem;
    color: rgba(255, 255, 255, 0.7);
    padding-top: 0.1rem;
  }

  .map {
    position: relative;
    height: 7.2rem;
    z-index: 9;
  }
  .map4 {
    width: 200%;
    height: 7rem;
    position: relative;
    left: -50%;
    top: 4%;
    margin-top: 0.2rem;
    z-index: 5;
  }
  .map1,
  .map2,
  .map3 {
    position: absolute;
    opacity: 0.5;
  }
  .map1 {
    width: 6.43rem;
    z-index: 2;
    top: 0.45rem;
    left: 0.7rem;
    animation: myfirst2 15s infinite linear;
  }
  .map2 {
    width: 5.66rem;
    top: 0.85rem;
    left: 1.2rem;
    z-index: 3;
    opacity: 0.2;
    animation: myfirst 10s infinite linear;
  }
  .map3 {
    width: 5.18rem;
    top: 1.07rem;
    left: 1.4rem;
    z-index: 1;
  }
  .tabs {
    text-align: center;
    padding: 0.1rem 0 0;
  }
  .tabs a {
    position: relative;
    display: inline-block;
    margin-left: 1px;
    padding: 0.05rem 0.2rem;
    color: #898989;
    transition: all 0.3s ease-out 0s;
    font-size: 14px;
  }
  .tabs li {
    display: inline-block;
  }
  .tabs a:after {
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    content: "";
    margin-left: 0;
    right: -1px;
    margin-top: 7px;
  }
  .tabs li a.active {
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
  }

  .tit02 {
    text-align: center;
    margin: 0.1rem 0;
    position: relative;
  }
  .tit02 span {
    border: 1px solid rgba(25, 186, 139, 0.17);
    letter-spacing: 2px;
    padding: 0.01rem 0.2rem;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.18rem;
    color: #49bcf7;
  }
  .tit02:before,
  .tit02:after {
    position: absolute;
    width: 26%;
    height: 1px;
    background: rgba(25, 186, 139, 0.2);
    content: "";
    top: 0.12rem;
  }
  .tit02:after {
    right: 0;
  }
  .tit02:before {
    left: 0;
  }
  #rankTable {
    .el-table {
      background-color: transparent;
      &::before {
        background-color: transparent;
      }
      .cell {
        color: white;
        /* font-size: 10rem; */
      }
      .ascending {
        .sort-caret.ascending {
          border-bottom-color: white;
        }
      }
      .descending {
        .sort-caret.descending {
          border-top-color: white;
        }
      }
      .my-row {
        background-color: transparent;
        height: 0.4rem;
        td {
          border: none;
          .cell {
            font-size: 0.3rem;
          }
        }
      }
      ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        position: absolute;
      }
      ::-webkit-scrollbar-thumb {
        background-color: #5bc0de;
      }
      ::-webkit-scrollbar-track {
        background-color: transparent;
      }
      tr {
        background-color: transparent !important;
        th {
          border: none;
          padding: 5px;
        }
      }
      .gutter {
        display: none;
      }
    }
    .el-table--enable-row-hover .el-table__body tr:hover > td {
      background-color: transparent;
    }
  }
}
</style>
